<template>
  <div id="demo">
    <div
      style="
        margin-top: 30px;
        padding: 20px;
        text-align: left;
        box-sizing: border-box;
      "
    >
      <div style="background: #fff; padding: 20px; box-sizing: border-box">
        <div style="margin-bottom: 10px">
          <el-button type="primary" plain @click="join">插入未填项</el-button>
        </div>

        <tinymce-editor ref="textarea" :height="350"> </tinymce-editor>
        <div style="margin: 10px 0">
          <el-button type="primary" plain @click="change"
            >保存转换形式</el-button
          >
        </div>
        <el-divider content-position="center">新的页面展示形式</el-divider>

        <div v-html="str" id="keke"></div>
        <div style="margin: 10px 0">
          <el-button type="primary" plain @click="print"
            >转换成打印形式</el-button
          >
        </div>
        <el-divider content-position="center">打印展示形式</el-divider>
        <div v-html="printStr" id="print"></div>
      </div>
    </div>
  </div>
</template>
<script>
// import TinymceEditor from "@/components/tinymce-editor/tinymce-editor";
export default {
  name: "test",
  components: {
    TinymceEditor,
  },
  data() {
    return {
      printStr: "",
      str: "",
      doc: "",
      form: { user: "" },
      cindex: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    join() {
      this.$refs["textarea"].focus(); //让富文本聚焦
      let html = "";
      this.cindex++;
      // 绑定签署方
      html = `<span ref="input_${this.cindex}" class="mceNonEditable" style="color:#CCC; border-bottom:1px solid #ccc;display:inline-block;text-align:center;padding:0 40px;" id="input_${this.cindex}">${this.cindex}</span>`;
      this.$refs["textarea"].onPaste(html);
      this.str = this.$refs["textarea"].textContent;
    },
    change() {
      let str = this.$refs["textarea"].textContent;
      console.log(str);
      let reg = /(?<=id=").*?(?=" )/g;
      let refArray = str.match(reg);
      console.log(refArray);
      refArray.forEach((item) => {
        this.form[item] = "";
        let domItrm = document.getElementById(item);
        domItrm.removeAttribute("style");
        domItrm.innerHTML = `<input style="height: 32px;line-height: 32px;" v-model="form.${item}" placeholder="请输入"></input>`;
      });
    },
    print() {
      this.printStr = this.$refs["textarea"].textContent;
      let newStr = "";
      let reg = /(?<=ref=").*?(?=" )/g;
      let refArray = this.printStr.match(reg);
      console.log(refArray);
      refArray.forEach((item, index) => {
        document.getElementById(item);
        this.form[item] = document
          .getElementById(item)
          .getElementsByTagName("input")[0].value
          ? document.getElementById(item).getElementsByTagName("input")[0].value
          : "";
        let newStr = `<span ref="${item}" class="mceNonEditable" id="${item}" style="color: #ccc; border-bottom: 1px solid #ccc; display: inline-block; text-align: center; padding: 0 40px;">${this.form[item]}</span> `;
        let replaceSrt = `<span ref="${item}" class="mceNonEditable" id="${item}" style="color: #ccc; border-bottom: 1px solid #ccc; display: inline-block; text-align: center; padding: 0 40px;">${index +
          1}</span>`;
        this.printStr = this.printStr.replace(replaceSrt, newStr);
      });
    },
  },
};
</script>
<style lang="scss">
#keke {
  .mceNonEditable {
    display: inline-block;
    color: #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 0 40px;
    > input {
      border: none;
      text-align: center;
      &:focus {
        color: red;
        outline: none;
        border: none;
      }
    }
  }
}
</style>
